<template>
  <page-header title="我的收藏" background="#F7F0E6"></page-header>
  <view class="collection">
    <view class="nav-box">
      <view class="item" @click="changeNavIndex(0)">
        <view class="title">
          活动
        </view>
        <image v-if="navIndex==0" class="img" src="../../static/img/cloud.png" />
      </view>
      <view class="item" @click="changeNavIndex(1)">
        <view class="title">
          商品
        </view>
        <image v-if="navIndex==1" class="img" src="../../static/img/cloud.png" />
      </view>
    </view>
    <collection-skeleton v-if="loading"></collection-skeleton>
    <view class="body" v-if="navIndex==0">
      <uni-swipe-action>
        <!-- 基础用法 -->
        <uni-swipe-action-item :right-options="options" @click="cancelCollection(item.postId)" v-for="item in Data"
          :key="item.postId">
            <!-- <view class="item" @tap="gotoPostDetail(item.postId)"> -->
          <view class="item" >
            <view class="left">
              <image :src="item.post.files[0].fileUrl" mode="aspectFill"></image>
            </view>
            <view class="right">
              <view class="title text-overflow-clamp-2">{{item.post.title}}</view>
              <view class="content">
                <view class="author">{{item.post.userName}}</view>
                <view class="group">
                  <view class="icon" style="margin-right: 50rpx;">
                    <uni-icons type="heart" size="25" color="#999"></uni-icons>
                    {{item.post.like || 0}}
                  </view>
                  <view class="icon">
                    <uni-icons type="eye" size="25" color="#999"></uni-icons>
                    {{item.post.view || 0}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <view class="body" v-if="navIndex==1">
    </view>
    <empty-img v-if="isEmpty || navIndex==1">
      <template #text>
        收藏空空的，去逛逛吧~
      </template>
      <template #img>
        <image src="../../static/empty-img/collection.png" mode="aspectFit"></image>
      </template>
    </empty-img>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const Data = ref([])
  const isEmpty = ref(false)
  const options = ref([{
    text: '取消收藏',
    style: {
      backgroundColor: '#94673D'
    }
  }])
  const loading = ref(true)
  const collectionArr = ref([])
  const navIndex = ref(0)
  const changeNavIndex = (index) => {
    navIndex.value = index
    getCollection()
  }
  onShow(() => {
    getCollection()
  })
  /**
   * 获取收藏列表
   */
  const getCollection = () => {
    http.request({
      url: '/mall4cloud_point/u/post/favor/list',
      method: 'GET'
    }).then((res) => {
      let arr = []
      res.forEach(item => {
        arr.push(item.postId)
      })
      collectionArr.value = arr
      uni.setStorageSync("collection", arr)
      Data.value = res
      if (Data.value.length == 0) {
        isEmpty.value = true
      } else {
        isEmpty.value = false
      }
    }).catch(() => {
      isEmpty.value = true
      uni.hideLoading()
    }).finally(()=>{
      loading.value = false
    })
  }
  /**
   * 取消收藏
   */
  const cancelCollection = (id) => {
    http.request({
      url: '/mall4cloud_point/u/post/unfavor?postId=' + id,
      method: 'GET'
    }).then((res) => {
      collectionArr.value = collectionArr.value.filter(item => item != id)
      uni.setStorageSync("collection", collectionArr.value)
      uni.showToast({
        title: '取消收藏成功',
        duration: 2000,
        icon: 'none'
      });
      getCollection()
    })
  }
  /**
   * 跳转详情
   */
  const gotoPostDetail = (id) => {
    uni.navigateTo({
      url: '/pages/activity-detail/activity-detail?id=' + id
    })
  }
</script>

<style lang="scss" scoped>
  .nav-box {
    width: 100%;
    height: 90rpx;
    background-color: #f7f0e6;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .item {
      position: relative;
      flex: 1;

      .title {
        font-family: PingFang TC, PingFang TC;
        font-weight: 600;
        font-size: 32rpx;
        color: #312619;
        line-height: 46rpx;
        text-align: center;
        z-index: 1;
      }

      .img {
        position: absolute;
        width: 60rpx;
        height: 33rpx;
        top: 26rpx;
        left: 155rpx;
      }
    }
  }

  .body {
    width: 670rpx;
    margin: 20rpx auto;

    .item {
      display: flex;
      margin-bottom: 36rpx;

      .left {
        width: 208rpx;
        height: 152rpx;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        flex-shrink: 0;
      }

      .right {
        margin-left: 24rpx;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
          height: 85rpx;
        }

        .content {
          margin-top: 21rpx;
          display: flex;
          justify-content: space-between;
          width: 438rpx;

          .author {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
          }

          .group {
            display: flex;

            .icon {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 26rpx;
              color: #999999;
              display: flex;
            }
          }
        }
      }
    }
  }

  .nomore {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750rpx;
    height: 640rpx;
  }
</style>
